Understanding transition-duration in CSS
The transition-duration property in CSS defines how long a transition animation should take to complete. It specifies the time it takes for a property to change from its initial value to its final value during a state change, such as when an element is hovered or focused.
The value can be specified in seconds (s) or milliseconds (ms). For example, transition-duration: 0.5s; means the transition will last half a second.
In this example, when you hover over the box, it scales and rotates smoothly over one second. The transition-duration determines how long this transformation takes to complete.
You can define multiple durations for multiple properties by separating them with commas, matching each duration with its respective property.
transition-durationsets how long a transition runs.Values are specified in seconds (
s) or milliseconds (ms).It can be combined with other transition properties like
transition-timing-functionandtransition-delayfor full control.